<template>
    <van-nav-bar
        title="消费记录"
        left-text="返回"
        left-arrow
        @click-left="back"
    />

    <!-- 下拉列表 -->
    <van-pull-refresh v-model="refreshing" @refresh="refresh">
        <van-list
            v-model:loading="loading"
            :finished="finished"
            :offset="10"
            :immediate-check="false"
            finished-text="没有更多了"
            @load="load"
        >

        <div class="bigbox">
            <div class="box" v-for="item in list">
                <div class="btop">
                    <label class="content">消费金额：</label>
                    <p class="btext">{{item.price}}</p>
                </div>
                <div class="bmid">
                    <label class="content">消费描述：</label>
                    <p class="btext">{{ item.content }}</p>
                </div>
                <div class="bmid">
                    <label class="content">消费时间：</label>
                    <p class="btext">{{ item.createtime_text }}</p>
                </div>
                <div class="fg"></div>
            </div>
            
        </div>

        </van-list>
    </van-pull-refresh>
</template>

<script setup>
    import {getCurrentInstance} from 'vue'
    const {proxy} = getCurrentInstance()

    var business = reactive(proxy.$cookies.get('business'))
    let list = ref([]);
    let loading = ref(false);
    let finished = ref(false);
    let refreshing = ref(false)
    let page = ref(1)

    // 钩子函数
    onBeforeMount(() => {
        // 请求列表
        RecordData()
    })

    const back = () => {
        proxy.$router.go(-1)
        return false
    }

    let RecordData = async () => {
        var data = {
            busid: business.id,
            page: page.value
        }

        var result = await proxy.$POST({
            url: '/record/index',
            params: data
        })

        // 请求发送完，加载状态停止
        loading.value = false

        if(result.code == 0){
            finished.value = true
        }else{
            list.value = list.value.concat(result.data)
            console.log(list.value);
            for(var i=0;i<list.value.length;i++){
                list.value[i].price = `￥${Math.abs(list.value[i].total)}`
            }
            page.value++
        }
    }

    //下拉刷新
    let refresh = async () => {
        page.value = 1
        list.value = []
        finished.value = false
        loading.value = true
        await load()
    }

    //上拉加载
    let load = async () => {
        //如果刷新状态已经为true了，就要修改为false
        if(refreshing.value)
        {
            refreshing.value = false
        }

        await RecordData()
    }
    

</script>


<style>
    .btop{
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
    }
    .content{
        margin: 0.5em;
        color: #706969;
        font-weight: bold;
    }
    .btext{
        margin: 0.5em;
        color: #a49797;
    }

    .bmid{
        width: 100%;
        font-size: 16px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    .bmid .content{
        width: 35%;
    }
    
    .fg{
        width: 100%;
        height: 1px;
        background-color: #706969;
    }
</style>